<template>
  <Modal
    :active="active"
    width="416px"
    height="164px"
    undivided
    modal-class="createModal"
  >
    <div class="header">
      <h2><img src="@/UI/assets/confirm.svg" />删除项目</h2>
      <p>
        确定要删除项目
        <b>{{ "projectName" }}</b> 吗？该操作无法进行复原，请谨慎操作。
      </p>
    </div>
    <template #footer>
      <Button type="default" class="cancel" @click="handleCancel">取消</Button>
      <Button type="error" class="delete" @click="handleSubmit">删除</Button>
    </template>
  </Modal>
</template>
<script setup lang="ts">
import { Modal, Button, Toast } from "cax-ui";
import { ref, defineProps, reactive, defineEmits } from "vue";
import { deleteProject } from "@/UI/api/projects";
const props = defineProps({
  active: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["changeActive", "refresh"]);
async function handleSubmit() {
  if (!props.id) {
    Toast.error({ content: "删除项目失败", duration: 1000 });
  } else {
    await deleteProject(props.id)
      .then((res) => {
        Toast.success({ content: "删除项目成功", duration: 1000 });
        emit("refresh");
      })
      .catch((err) => {
        Toast.error({ content: "删除项目失败", duration: 1000 });
        console.log("删除失败", err);
      });
  }
  emit("changeActive", false);
}
function handleCancel() {
  console.log("cancel");
  emit("changeActive", false);
}
</script>
<style lang="less" scoped>
.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 24px;
  h2 {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 24px;
    color: #212529;
    margin: 0;
    display: flex;
    align-items: center;
    img {
      margin-right: 13.5px;
    }
  }
  p {
    margin-left: 35.5px;
    margin-top: 8px;
  }
}
:deep(.vxp-modal__footer) {
  margin-bottom: 14px !important;
}
:deep(.vxp-button--inherit) {
  font-size: 20px !important;
}
.cancel,
.delete {
  margin-bottom: 9px;
}
</style>
